<template>
	<!-- 合同欠款页 -->
	<div class="zs-table-page-container" v-loading="loading">
		<bill-search :queryParams="queryParams" @queryList="searchFn"></bill-search>
		<div class="zs-card zs-table-page-content">
			<el-table :data="tableData" class="zs-table-page-main zs-table-first-row-special" :stripe="true" :cell-class-name="getCellClassName" :header-cell-class-name="getCellClassName">
				<el-table-column label="序号" width="60" :align="'center'" fixed>
					<template #default="scope">
						{{ scope.$index == 0 ? '合计' : scope.$index + curPageSize * (currentPage - 1) }}
					</template>
				</el-table-column>
				<el-table-column prop="financeperiod" label="权责记账月" :align="'center'" min-width="100" :formatter="defaultTableData" fixed></el-table-column>
				<el-table-column prop="overdueDays" label="欠款账龄" :align="'right'" :formatter="defaultTableData" fixed></el-table-column>
				<el-table-column prop="bizmode" label="费项类型" :align="'left'" fixed :formatter="defaultTableData" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="chargetypeName" label="费项名称" :align="'left'" min-width="150" fixed :formatter="defaultTableData" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="formatInvrecamtl" label="应收金额" :align="'right'" min-width="120" :show-overflow-tooltip="true" fixed :formatter="defaultTableData"></el-table-column>
				<el-table-column prop="formatInvincomeamtl" label="实收金额" :align="'right'" min-width="120" :show-overflow-tooltip="true" fixed :formatter="defaultTableData"></el-table-column>
				<el-table-column prop="formatDebtamt" label="欠款金额" :align="'right'" min-width="120" :show-overflow-tooltip="true" fixed :formatter="defaultTableData"></el-table-column>
				<el-table-column prop="debtSettlementPlan" label="追缴方案" :formatter="defaultTableData" :align="'left'" min-width="150" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="estimatedPaymentDate" label="预计回款时间" :formatter="defaultTableData" :align="'center'" min-width="150" show-overflow-tooltip></el-table-column>
				<el-table-column prop="actualExecution" label="追缴动作" :formatter="defaultTableData" :align="'center'" min-width="120" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="recoveryRecord" label="追缴记录" :formatter="defaultTableData" :align="'center'" min-width="120">
					<template #default="scope">
						<el-image v-if="scope.row.recoveryRecord && scope.row.recoveryRecord.length > 0" class="zs-table-image-min" :src="scope.row.recoveryRecord[0]" :preview-src-list="scope.row.recoveryRecord" :preview-teleported="true" />
						<div v-else>{{ scope.$index == 0 ? '' : '-' }}</div>
					</template>
				</el-table-column>
				<el-table-column prop="managementRequirement" label="标准动作" :formatter="defaultTableData" :align="'center'" min-width="120" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="contractsStatus" label="合同状态" :formatter="defaultTableData" :align="'center'"></el-table-column>
				<el-table-column prop="conStartDate" label="合同开始" :formatter="defaultTableData" :align="'center'" min-width="120"></el-table-column>
				<el-table-column prop="conEndDate" label="合同结束" :formatter="defaultTableData" :align="'center'" min-width="120"></el-table-column>
				<el-table-column prop="contractsId" label="合同编号" :formatter="defaultTableData" :align="'left'" min-width="120" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="customerName" label="商户名称" :formatter="defaultTableData" :align="'left'" min-width="120" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="isrelationcustomer" label="是否关联方" :formatter="defaultTableData" min-width="100" :align="'center'"></el-table-column>
				<el-table-column prop="islitigation" label="是否诉讼" :formatter="defaultTableData" :align="'center'"></el-table-column>
				<el-table-column prop="issinglerow" label="是否单列" :formatter="defaultTableData" :align="'center'"></el-table-column>
				<el-table-column prop="invoiceCode" label="账单编号" :formatter="defaultTableData" :align="'left'" min-width="120" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="invoiceDate" label="账单日期" :formatter="defaultTableData" :align="'center'" min-width="120"></el-table-column>
				<el-table-column prop="invoicelastDate" label="最晚付款日" :formatter="defaultTableData" :align="'center'" min-width="120"></el-table-column>
				<el-table-column prop="financePeriodDate" label="权责口径日" :formatter="defaultTableData" :align="'center'" min-width="120"></el-table-column>
				<el-table-column prop="assessmentDate" label="考核口径日" :formatter="defaultTableData" :align="'center'" min-width="120"></el-table-column>
				<el-table-column prop="formatRentarea" label="面积" :align="'right'" show-overflow-tooltip :formatter="defaultTableData"></el-table-column>
				<el-table-column prop="conshopCode" label="铺位号" :formatter="defaultTableData" :align="'center'" show-overflow-tooltip></el-table-column>
				<el-table-column prop="bizmode" label="资产类型" :formatter="defaultTableData" :align="'center'" show-overflow-tooltip></el-table-column>
				<el-table-column prop="brandName" label="品牌名称" :formatter="defaultTableData" :align="'left'" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="responsiblePerson" label="楼层长" :formatter="defaultTableData" :align="'center'" show-overflow-tooltip></el-table-column>
			</el-table>
			<div class="zs-text-gray-dark zs-text-sm zs-space-top">*面积：㎡；欠款金额：元</div>
			<div class="zs-space-top-sm zs-table-page-pagination">
				<el-pagination v-model:currentPage="currentPage" v-model:page-size="curPageSize" :page-sizes="curPageSizes" :small="true" :background="true" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
			</div>
		</div>
	</div>
</template>
<script setup>
	import billSearch from '@/views/Manage/Business/detailPages/debtInformation/component/billSearch';
	import detailApi from '@/api/Manage/Business/detailPages';
	import { toThousands } from '@/utils/number-util';
	import { ref, reactive, onUnmounted } from 'vue';
	import { useStore } from 'vuex';
	import { useRoute } from 'vue-router';
	const route = useRoute();
	let store = useStore();
	const curPageSizes = ref(store.state.uiPageSizes);
	const curPageSize = ref(store.state.uiPageSizeDefault);
	const currentPage = ref(1);
	const total = ref(0);
	// 查询条件
	let queryParams = reactive({
		projectCode: route.query.projectCode,
		brandName: route.query.brandName ? [decodeURIComponent(atob(route.query.brandName))] : [],
		sourceType: Number(route.query.sourceType),
		financePeriodStartDate: '',
		financePeriodEndDate: '',
		chargetypeGroupId: [],
		chargetypeIdList: [],
		type: 1,
	});
	let loading = ref(false);
	let tableData = ref([]); // 表格数据
	let tableTopRow = ref({}); // 表格第一行数据

	const getList = async () => {
		loading.value = true;
		detailApi.queryBillListApi({ ...queryParams, pageNo: currentPage.value, pageSize: curPageSize.value }).then(res => {
			if (res.data.code != 200) return;
			initData(res.data.data.childList);
			tableData.value = [tableTopRow.value];
			tableData.value = tableData.value.concat(res.data.data.childList);
			total.value = res.data.data.totalCount;
			loading.value = false;
		});
	};

	const getTopRow = () => {
		detailApi.querySumBillDebtamtApi({ ...queryParams, pageNo: currentPage.value, pageSize: curPageSize.value }).then(res => {
			if (res.data.code != 200) return;
			initData([res.data.data]);
			tableTopRow.value = res.data.data;
			tableData.value[0] = tableTopRow.value;
		});
	};
	const initData = list => {
		if (list && list.length > 0) {
			list.forEach(item => {
				item.formatInvrecamtl = item.invrecamtl ? toThousands(item.invrecamtl) : '';
				item.formatInvincomeamtl = item.invincomeamtl ? toThousands(item.invincomeamtl) : '';
				item.formatDebtamt = item.debtamt ? toThousands(item.debtamt) : '';
				item.formatRentarea = item.rentarea ? toThousands(item.rentarea) : '';
			});
		}
	};

	const searchFn = data => {
		queryParams = data;
		getList();
		getTopRow();
	};

	// 分页
	const handleSizeChange = val => {
		curPageSize.value = val;
		getList();
	};

	const handleCurrentChange = val => {
		currentPage.value = val;
		getList();
	};

	const getCellClassName = ({ columnIndex }) => {
		if ([7, 12, 17, 20, 25, 29].includes(columnIndex)) {
			return 'zs-table-cell-border-right';
		}
	};

	const defaultTableData = (row, column, cellValue, index) => {
		let emptyVal = index == 0 ? '' : '-';
		return cellValue || cellValue === 0 ? cellValue : emptyVal;
	};

	const initCharge = () => {
		let collectionRateSearchParams = JSON.parse(localStorage.getItem('debitSearchParams'));
		if (!collectionRateSearchParams) return;
		queryParams.chargetypeGroupId = collectionRateSearchParams.chargetypeParentIdList;
		queryParams.chargetypeIdList = collectionRateSearchParams.chargetypeIdList;
	};

	onUnmounted(() => {
		localStorage.removeItem('debitSearchParams');
	});

	window.addEventListener('beforeunload', () => {
		localStorage.removeItem('debitSearchParams');
	});

	initCharge();
	getList();
	getTopRow();
</script>
